<template>
  <div  v-show="show" v-cloak>
    <div>
      <Header></Header>
    </div>
    <div>
      <div class="main-body">
        <div class="main-content">
          <div>
            <Crumbs></Crumbs>
          </div>
          <div class="vehicle">
            <h3>按品牌拼音字母查找</h3>
            <ul class="vehicle_a">
              <li :class="{'active' : muindex == index}" v-for="(item,index) in mulist" @click="muClick(item,index)"><span>{{item}}</span></li>
            </ul>
            <ul class="vehicle_b">
              <li v-for="(item,index) in CarCateList" :class="{'active' : ca_id == item.ca_id}" @click="carcateclick(item.ca_id,index)">
                <img :src="item.ca_image" alt="">
                <p>{{item.ca_name}}</p>
              </li>
            </ul>
          </div>
          <div class="car-info">
            <div class="right right-module">
              <div>
                <VehicleRight :mo_id="moId" :cate="catename" :mo_name="moName" :ca_id="caId"></VehicleRight>
              </div>
            </div>
            <div class="answer_lo">
              <div class="vehicle_ac">
                <span class="vehicle_a1" @click="products">{{productsname}}</span>
                <span class="vehicle_a2" @click="upload">我要去上传</span>
              </div>
              <div v-if="vehicleList.length > 0">
                <ul class="brand_ul2 brand_service_ul">
                  <li v-for="(item,index) in vehicleList" @click="uploaddetail(item.ev_id)">
                    <img :src="item.ev_image" alt="">
                    <div>
                      <h3>{{item.ev_title}}</h3>
                      <p v-html="item.introduction"></p>
                      <ul class="ve_cp">
                        <li>{{item.time}}</li>
                        <li>上传人：{{item.us_nickname}}</li>
                        <li>
                          <span>标签:</span>
                          <ul>
                            <li v-for="(item_a,index_a) in item.label_array">{{item_a}}</li>
                          </ul>
                        </li>
                      </ul>
                    </div>
                  </li>
                </ul>
                <div class="pageul">
                  <Page :total="count" :page-size="limit"  prev-text="上一页" next-text="下一页" show-total @on-change="changepage"></Page>
                </div>
              </div>
              <div v-else class="nocontent">
                暂无内容
              </div>
            </div>
            <div class="clear"></div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <Footer></Footer>
    </div>
  </div>
</template>
<script>
  import 'iview/dist/styles/iview.css'
  import Header from './Header'
  import Footer from './Footer'
  import VehicleRight from './VehicleRight'
  import Crumbs from './Crumbs'
//  import store from './store/index.js'
  export default {
    name: 'revehicle',
    components: {
      'Header': Header,
      'Footer': Footer,
      'VehicleRight': VehicleRight,
      'Crumbs': Crumbs
    },
    data () {
      return {
        name: '',
        productsname: '只看官网测评',
        count: 0,
        cate: '',
        skey: '',
        ca_id: '',
        CarCateList: [],
        vehicleList: [],
        role: '',
        page: 0,
        limit: 6,
        show: false,
        getEvaluationListAjax: true,
        getCarCateListAjax: true,
        muindex: 0,
        letter: 'A',
        mulist: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
      }
    },
    computed: {
      moId: function () {
        return ''
      },
      catename: function () {
        return this.cate
      },
      moName: function () {
        return ''
      },
      caId: function () {
        return this.ca_id
      }
    },
    created: function () {
      this.verify()
    },
    activated: function () {
      this.verify()
    },
    methods: {
      upload: function () {
        let thisObj = this
        let routeUrl = this.$router.resolve({
          path: '/UploadAssessmentCar',
          query: {
            name: thisObj.cate
          }
        })
        window.open(routeUrl.href, '_self')
      },
      uploaddetail: function (id) {
        let thisObj = this
        let routeUrl = this.$router.resolve({
          path: '/Revehicle/AssessmentDetail',
          query: {
            ev_id: id,
            cate: thisObj.cate
          }
        })
        window.open(routeUrl.href, '_self')
      },
      products: function () {
        if (this.productsname === '只看官网测评') {
          this.productsname = '查看全部'
          this.role = '官方'
        } else {
          this.productsname = '只看官网测评'
          this.role = ''
        }
        this.getEvaluationList()
      },
      carcateclick: function (caid, index) {
        this.ca_id = caid
        this.page = 0
        this.vehicleList = []
        this.getEvaluationListAjax = true
        this.getEvaluationList()
      },
      changepage (index) {
        console.log(index)
        this.page = index - 1
        this.vehicleList = []
        this.getEvaluationListAjax = true
        this.getEvaluationList()
      },
      muClick: function (item, index) {
        let thisObj = this
        this.muindex = index
        this.letter = item
        this.getCarCateList(function () {
          thisObj.page = 0
          thisObj.vehicleList = []
          thisObj.getEvaluationListAjax = true
          thisObj.getEvaluationList()
        })
      },
      crumbLink: function (link, title) {
        if (link === '') {
          return false
        }
        let routeUrl = this.$router.resolve({
          path: link,
          query: {
            cate: title
          }
        })
        window.open(routeUrl.href, '_self')
      },
      goback: function () {
        let routeUrl = this.$router.resolve({
          path: '/'
        })
        window.open(routeUrl.href, '_self')
      },
      getEvaluationList: function () {
        let thisObj = this
        if (!thisObj.getEvaluationListAjax) {
          return false
        }
        thisObj.getEvaluationListAjax = false
        // 测评列表
        var typename = ''
        if (thisObj.cate === '爱车测评') {
          typename = '爱车'
        } else {
          typename = '服务'
        }
        thisObj.$chaos.ajax({
          data: {
            skey: thisObj.skey,
            ca_id: thisObj.ca_id,
            role: thisObj.role,
            type: typename,
            page: thisObj.page,
            limit: thisObj.limit
          },
          slient: true,
          userinfo: false,
          url: 'Evaluation/getEvaluationList',
          callback: function (type, res) {
            thisObj.getEvaluationListAjax = true
            thisObj.show = true
            if (res.status === 'SUCCESS') {
              if (thisObj.page === 0) {
                thisObj.count = parseInt(res.result.count)
              }
              thisObj.vehicleList = res.result.list
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      getCarCateList: function (callback) {
        let thisObj = this
        if (!thisObj.getCarCateListAjax) {
          return false
        }
        thisObj.getCarCateListAjax = false
        thisObj.$chaos.ajax({
          data: {
            letter: thisObj.letter
          },
          slient: true,
          userinfo: false,
          url: 'Car/getCarCateList',
          callback: function (type, res) {
            thisObj.getCarCateListAjax = true
            thisObj.show = true
            if (res.status === 'SUCCESS') {
              var namea = thisObj.letter
              thisObj.CarCateList = res.result.list[namea]
              thisObj.ca_id = res.result.list[namea][0].ca_id
              callback()
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      verify: function () {
        let thisObj = this
        thisObj.cate = decodeURI(thisObj.$chaos.getQueryString('cate'))
        var name = thisObj.cate
        this.name = name
        var crumbs = []
        crumbs[0] = {
          title: name,
          link: ''
        }
        console.log(JSON.stringify(crumbs))
        console.log(JSON.stringify('vehiclecenter'))
        this.$store.commit('crumbs', crumbs)
        this.getCarCateList(function () {
          thisObj.getEvaluationList()
        })
      }
    }
  }
</script>
<style>
  .main-title span {
    font-size: 16px!important;
  }
  .nocontent{
    text-align: center;
    clear: both;
    font-size: 20px;
    color: #949494;
    overflow: hidden;
    padding-top: 60px;
  }
  .main-title span{
    cursor: pointer;
  }
  .blue_r{
    color: #528df5;
  }
  *{
    font-family: '微软雅黑';
  }
</style>
<style scoped>
  .ve_cp{
    overflow: hidden;
    margin-top:30px;
  }
  .vehicle_b>li:hover img, .vehicle_b>li.active img{
    border: 2px solid #abe8ff;
  }
  .ve_cp>li{
    float: left;
    margin-right:20px;
    color: #6d6d6d;
    font-size: 14px;
  }
  .ve_cp>li>span{
    float: left;
  }
  .ve_cp>li>ul{
    float: left;
  }
  .ve_cp li>ul>li{
    float: left;
    padding:0px 10px;
    line-height: 22px;
    border:1px solid #7790ec;
    color: #7790ec;
    text-align: center;
    margin-left:30px;
  }
  .ve_cp>li:last-child{
    float: right;
    margin-right:0px;
  }
  .vehicle_ac{
    width:480px;
    float: right;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .vehicle_a1{
    background: url("../../static/image/k_30.png");
    text-align: center;
    color: #fff;
    height: 45px;
    line-height: 50px;
    width: 198px;
    background-size: cover;
    font-size: 18px;
    float: left;
    cursor: pointer;
  }
  .vehicle_a2{
    border:1px solid #7790ec;
    text-align: center;
    color: #7790ec;
    height: 38px;
    line-height: 38px;
    width: 180px;
    font-size: 18px;
    float: right;
    margin-top:6px;
    cursor: pointer;
  }
  .brand_ul2 li{
    background: none!important;
  }
  .brand_ul2>li{
    padding-left: 0px!important;
    cursor: pointer;
    margin-bottom: 40px!important;
  }
  .brand_ul2>li:hover{
    color: #6d6d6d;
  }
  .case_p{
    margin-top:30px;
    color: #6d6d6d;
  }
  .case_p .fr{
    float: right;
  }
  .brand_ul2>li>img{
    width:320px;
    height:270px;
    float: left;
  }
  .brand_ul2>li>div{
    margin-left:350px;
    margin-top: 20px;
  }
  .brand_ul2>li h3{
    font-size: 20px;
  }
  .brand_ul2>li p{
    font-size: 14px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    text-align: justify;
  }
  .pageul{
    width:100%;
    text-align: center;
    overflow: hidden;
  }
  .brand_service_ul{
    overflow: hidden;
    width: 100%;
    min-height:1700px;
  }
  .topc ul li {
    cursor: pointer;
  }
  .brand_ul2>li {
    margin-top: 30px;
    margin-bottom: 30px;
    overflow: hidden;
    text-align: left;
    list-style-type: none;
    background: url(../../static/image/zx_8.png) no-repeat;
    padding-left: 33px;
    background-position: 8px 6px;
    background-size: 13px;
  }
  .brand_ul2>li h3 {
    margin-bottom: 20px;
  }
  .brand_ul2>li p {
    line-height: 33px;
    font-size: 16px;
    height:99px;
  }
  .vehicle, .vehicle_b{
    width:100%;
    clear: both;
    overflow: hidden;
  }
  .vehicle_b>li img{
    border:2px solid #4aaff7;
    width:155px;
    height:155px;
    cursor: pointer;
  }
  .vehicle_b{
    margin: 0px -12px;
  }
  .vehicle_a{
    overflow: hidden;
    margin: 0px -32px;
  }
  .vehicle_b>li p{
    text-align: center;
    margin:20px 0px;
    font-size: 18px;
    font-weight: 500;
  }
  .vehicle_b>li{
    width:216.6px;
    float: left;
    text-align: center;
  }
  .vehicle_a>li{
    width:103px;
    overflow: hidden;
    float: left;
    text-align: center;
    height:70px;
  }
  .vehicle_a li.active span,.vehicle_a li span:hover{
    display: inline-block;
    width:35px;
    height:35px;
    border-radius: 50%;
    background:url("../../static/image/p_21.png");
    background-size: cover;
    color: #fff;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
    font-size: 18px;
  }
  .vehicle_a li span{
    font-size: 18px;
    display: inline-block;
    width:35px;
    height:35px;
    border-radius: 50%;
    color: #000;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
  }
  .vehicle>h3{
    font-size: 18px;
    line-height: 40px;
    margin:20px 0px;
    font-weight: 600;
  }
  .main-body {
    background: url(../../static/image/o_15.png) center top no-repeat;
    padding: 20px 0 50px;
  }
  .main-content {
    width: 1300px;
    margin: 0 auto;
  }
  .right {
    float: right;
  }
  .main-title .crumbs-icon{
    display: inline-block;
    width: 15px;
    height:15px;
    background-image: url("../../static/image/hierarchy-icon.png");
    background-size: 100% 100%;
    transform: translateY(2px);
    margin: 0 5px;
  }
  .main-title .current-position{
    color: #47A7FE;
  }
  .car-name{
    padding-top: 20px;
    font-size: 24px;
  }
  .car-info{
    padding-top: 20px;
  }
  .car-info .right-module{
    width: 289px;
  }
  .car-info .right-item .module-title{
    background: url("../../static/image/k_29.png") center center no-repeat;
    line-height: 60px;
    text-align: center;
    font-size: 18px;
  }
  .car-info .right-item .module-content{
    padding:10px 0;
  }
  .car-info .right-item .history .year{
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 3px;
    padding-top: 15px;
  }
  .car-info .right-item .history li{
    line-height: 40px;
    padding-left:20px;
    position: relative;
    font-size: 14px;
    color:#888;
  }
  .car-info .right-item .history li .dot{
    width:6px;
    height:6px;
    border-radius: 50%;
    background: #3D6AE6;
    position: absolute;
    left: 0;
    top: 17px;
  }
  .car-info .right-item .look-all{
    color: #000;
    font-size: 14px;
    text-align: right;
    padding-top: 10px;
  }
  .enter-arrow-icon{
    width:6px;
    height: 11px;
    display: inline-block;
    background-image: url("../../static/image/k_20.png");
  }
  .recommend li{
    padding-bottom: 10px;
  }
  .right-module-car{
    position: relative;
  }
  .right-module-car img{
    display: block;
    width:100%;
  }
  .right-module-car .car-cover{
    position: absolute;
    bottom:0;
    left:0;
    right: 0;
    line-height: 30px;
    padding: 0 10px;
    color: #fff;
    background: rgba(0,0,0,0.4);
    letter-spacing: 2px;
  }
  .recommend li .advantage{
    letter-spacing: 2px;
    line-height: 24px;
    padding-top: 15px;
    color: #666;
  }
  .recommend li>a{
    display: block;
  }
  .review .car-play{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .review .review-content{
    padding:10px 0;
    color: #666;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 2px;
  }
  .review h4{
    padding: 10px 0;
    font-size: 20px;
    font-weight: 100;
  }
  .review a{
    display: block;
  }
  .answer_lo{
    float: left;
    width:955px;
  }
</style>
